<template>
  <div class="reviewManagement">
    <div class="witch">
      <div>
        <el-switch
          v-model="competitionSwitch"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        <p>是否开启大赛审核</p>
      </div>
    </div>
    <div class="top">
      <div class="left">
        <el-select
          v-model="searchContent.selected"
          class="m-2"
          placeholder="请选择"
          style="
            width: 1.1rem;
            position: relative;
            top: -0.0297rem;
            margin-right: 0.1rem;
          "
        >
          <el-option
            v-for="item in selectedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            ><span style="margin-left: 0.1rem; line-height: 0.18rem">{{
              item.label
            }}</span></el-option
          >
        </el-select>
        <el-input
          v-model="searchContent.keyWord"
          placeholder="请输入大赛名字或关键字"
          style="width: 1.1rem; margin-right: 0.1rem"
          :prefix-icon="Search"
        />
        <el-date-picker
          v-model="searchContent.timeRange"
          style="position: relative; top: -0.018rem"
          type="daterange"
          range-separator="~"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
      <div class="middle">
        <el-button type="searchButton" style="width: 0.6rem">查询</el-button>
      </div>
      <div class="right">
        <el-button type="addButton" style="width: 0.7rem">创建大赛</el-button>
      </div>
    </div>
    <body>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{
          'text-align': 'center',
          'font-weight': 'normal',
          color: '#000',
          'background-color': 'rgb(232,232,232)',
          height: '50px',
        }"
        :cell-style="{ 'text-align': 'center' }"
        :footer-cell-style="{
          'text-align': 'center',
        }"
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="schedule" label="进度" width="110">
          <template #default="scope">
            <span
              :style="{
                color: checkScheduleColor(scope.row.schedule),
              }"
              >{{ scope.row.schedule }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="promoter" label="发起人" width="120" />
        <el-table-column prop="participantsNumber" label="参与人数" width="110">
          <template #default="scope">
            <el-button link type="primaryButton" @click="participantsNumberShow" size="small">{{
              scope.row.participantsNumber
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="gradeDistribution" label="成绩分布" width="80">
          <template #default="scope">
            <el-button
              link
              type="success"
              size="small"
              @click="gradeDistributionShow"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="participationMethods"
          label="参与方式"
          width="120"
        >
          <template #default="scope">
            <span
              :style="{
                color:
                  scope.row.participationMethods == '自主注册'
                    ? '#F56C6C'
                    : 'rgb(61, 154, 184)',
              }"
              >{{ scope.row.participationMethods }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="competitionTime" label="大赛时间" width="320" />
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-button
              link
              v-for="(item, index) in checkOperateButtonShow(
                scope.row.schedule
              )"
              :key="index"
              :type="item.type"
              @click="item.function(dialogList)"
              size="small"
              >{{ item.title }}</el-button
            >
            <!-- checkOperateFunction(scope.row.schedule) -->
          </template>
        </el-table-column>
      </el-table>
    </body>
    <footer>
      <el-pagination
        v-show="total > 0"
        :total="total"
        background
        layout="prev, pager, next"
        v-model:page-size="queryParams.pageSize"
        v-model:current-page="queryParams.pageNum"
        @change="getList"
      />
    </footer>
    <div class="dialogList">
      <!-- 参与人数弹窗 -->
      <participantsNumber v-model:dialogVisible="dialogList.participantsNumberVisible"></participantsNumber>
      <!-- 成绩分布弹窗 -->
      <gradeDistribution
        v-model:dialogVisible="dialogList.gradeDistributionVisible"
      ></gradeDistribution>
      <!-- 驳回操作弹窗 -->
      <rejectOperate
        v-model:dialogVisible="operateDialogVisibleList.rejectOperateVisible"
        @refreshTable="refreshTable"
      >
      </rejectOperate>
      <!-- 暂停操作弹窗 -->
      <pauseOperate
        v-model:dialogVisible="operateDialogVisibleList.pauseOperateVisible"
        @refreshTable="refreshTable"
      ></pauseOperate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import checkColor from "@/views/data/checkColor";
import checkShow from "@/views/data/checkShow";
import gradeDistribution from "@/views/components/dialog/gradeDistribution.vue";
import participantsNumber from "@/views/components/dialog/participantsNumber.vue";
import rejectOperate from "@/views/components/dialog/rejectOperate.vue";
import pauseOperate from "@/views/components/dialog/pauseOperate.vue";
/**
 * 是否开启大赛审核
 */
const competitionSwitch = ref(true);
/**
 * 查询内容参数
 */
const searchContent = reactive({
  keyWord: "",
  selected: "1",
  timeRange: "",
});
/**
 * 查询选择参数
 */
const selectedOptions = reactive([
  {
    value: "1",
    label: "全部",
  },
  {
    value: "2",
    label: "待审核",
  },
  {
    value: "3",
    label: "报名中",
  },
  {
    value: "4",
    label: "进行中",
  },
  {
    value: "5",
    label: "评审中",
  },
  {
    value: "6",
    label: "公示中",
  },
  {
    value: "7",
    label: "奖品发放中",
  },
  {
    value: "8",
    label: "已结束",
  },
  {
    value: "9",
    label: "已暂停",
  },
  {
    value: "10",
    label: "已驳回",
  },
]);
/**
 * 表格内容
 */
const tableData = [
  {
    name: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    schedule: "待审核",
    promoter: "张三",
    participantsNumber: "0",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年四川省第四届高职高专“软件通杯”简历设计技能大赛",
    schedule: "进行中",
    promoter: "李天泽",
    participantsNumber: "8600/10050",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年四川省第四届高职高专“软件通杯”简历设计技能大赛",
    schedule: "报名中",
    promoter: "李天泽",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "评审中",
    promoter: "李书易",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "公示中",
    promoter: "孙忆枫",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "奖品发放中",
    promoter: "段问薇",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    schedule: "已结束",
    promoter: "丁曼容",
    participantsNumber: "100/200",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "已暂停",
    promoter: "刘大大",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    schedule: "已驳回",
    promoter: "王曼",
    participantsNumber: "",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    schedule: "待审核",
    promoter: "张三",
    participantsNumber: "0",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年四川省第四届高职高专“软件通杯”简历设计技能大赛",
    schedule: "进行中",
    promoter: "李天泽",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "评审中",
    promoter: "李书易",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "公示中",
    promoter: "孙忆枫",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "奖品发放中",
    promoter: "段问薇",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    schedule: "已结束",
    promoter: "丁曼容",
    participantsNumber: "100/200",
    gradeDistribution: "",
    participationMethods: "指定人员",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
  {
    name: "2023年广东技术师范大学“博学杯”英语配音大赛",
    schedule: "已暂停",
    promoter: "刘大大",
    participantsNumber: "100/100",
    gradeDistribution: "",
    participationMethods: "自主注册",
    competitionTime: "2023-09-04 09:00:00 ~ 2023-09-10 09:00:00",
  },
];
/**
 * 控制弹窗显示布尔值
 */
const dialogList = reactive({
  gradeDistributionVisible: false,
  participantsNumberVisible:false,
});
const gradeDistributionShow = () => {
  dialogList.gradeDistributionVisible = true;
};
const participantsNumberShow = () =>{
  dialogList.participantsNumberVisible = true;
}
/**
 * 刷新table
 */
const refreshTable = (value: string) => {
  console.log("父组件打印:", value);
};
/**
 * 获取根据进度显示颜色方法
 */
const { checkScheduleColor } = checkColor();
/**
 * 根据进度显示不同操作按钮和绑定对应的方法
 */
const { checkOperateButtonShow, operateDialogVisibleList } = checkShow();
/**
 * 分页
 */
let queryParams = reactive({
  pageSize: 10,
  pageNum: 5,
});
let total = ref(100);
const getList = (a, b) => {
  console.log(a, b);
};
</script>

<style lang="scss" scoped>
.reviewManagement {
  padding: 0.18rem 0.14rem;
}
.witch {
  display: flex;
  justify-content: right;
  margin-bottom: 0.1rem;
  div {
    display: flex;
    p {
      font-weight: bold;
      margin-left: 0.04rem;
      line-height: 0.18rem;
    }
  }
}
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.el-button--searchButton {
  color: #fff;
  background-color: rgb(61, 154, 184);
  border-color: rgb(61, 154, 184);
}
.el-button--searchButton:focus,
.el-button--searchButton:hover {
  color: #fff;
  background-color: rgb(61, 154, 184, 0.8);
  border-color: rgb(61, 154, 184, 0.8);
}
.el-button--searchButton:active {
  color: #fff;
  background-color: rgb(61, 134, 184);
  border-color: rgb(61, 134, 184);
}
//默认按钮
.el-button--primaryButton {
  color: rgb(61, 154, 184);
  background-color: transparent;
  border-color: transparent;
}
.el-button--primaryButton:focus,
.el-button--primaryButton:hover {
  color: rgb(61, 154, 184, 0.7);
  background-color: transparent;
  border-color: transparent;
}
.el-button--primaryButton:active {
  color: rgb(61, 134, 184);
  background-color: transparent;
  border-color: transparent;
}
//导入按钮
.el-button--importButton {
  color: #fff;
  background-color: rgb(140, 203, 56);
  border-color: rgb(140, 203, 56);
}
.el-button--importButton:focus,
.el-button--importButton:hover {
  color: #fff;
  background-color: rgb(140, 203, 56, 0.8);
  border-color: rgb(140, 203, 56, 0.8);
}
.el-button--importButton:active {
  color: #fff;
  background-color: rgb(140, 183, 56);
  border-color: rgb(140, 183, 56);
}
//新增按钮
.el-button--addButton {
  color: #fff;
  background-color: rgb(237, 56, 51);
  border-color: rgb(237, 56, 51);
}
.el-button--addButton:focus,
.el-button--addButton:hover {
  color: #fff;
  background-color: rgb(237, 56, 51, 0.8);
  border-color: rgb(237, 56, 51, 0.8);
}
.el-button--addButton:active {
  color: #fff;
  background-color: rgb(237, 36, 51);
  border-color: rgb(237, 36, 51);
}
footer {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
//分页样式
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #fff;
  color: #409eff;
  border: 0.01rem solid #409eff;
}
::v-deep(.el-pagination.is-background .el-pager li) {
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
::v-deep(.el-pagination.is-background .btn-prev) {
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
::v-deep(.el-pagination.is-background .btn-next) {
  background-color: #fff;
  color: rgb(65, 80, 88);
  border: 0.01rem solid rgb(187, 187, 187);
}
</style>
